<template lang="pug">
  .login(v-if="isShow")
    .mask
    .content.clearfix
      .mask
      .close(@click="handleClose")
        i.iconfont &#xe60b;
      //- 登录
      .form.from-signin
        h2 用户登录
        .form-wrap
          .field
            p 用户名
            label
              i.iconfont &#xe81e;
            input(v-model="username", type="text", placeholder="用户名")
          .field
            p 密码
            label
              i.iconfont &#xe6f0;
            input(v-model="signInPwd", type="password", placeholder="密码")
          .field.clearfix
            a.fl(href="javascript:;", @click="switchSignUp") 用户注册
            a.fr(href="javascript:;", @click="switchPassWord") 忘记密码
          .field
            span.login-btn(@click="handleSignIn") 登陆
</template>
<script>

import { sign } from '@/utils'
import autoSwitchSceneMixin  from '@/mixins/switch-scene'

export default {
  mixins: [autoSwitchSceneMixin],
  data() {
    return {
      isShow: false,
      username: null,
      signInPwd: null,
      phoneOk: false,
      nickNameOk: false,
      rePwdOk: false,
      loginStyle: {},
      maskStyle: {
        background: '#fff'
      }
    }
  },
  created() {
    this.loginStyle = {
      'background-image': `url(${$globalconfig.URLS.API}krpano/images/entry_bg.jpg)`,
      backgroundSize: 'cover'
    }
    this.maskStyle = {
      'background-image': `url(${$globalconfig.URLS.API}krpano/images/entry_bg.jpg)`,
      backgroundSize: 'cover'
    }
  },
  mounted() {
    this.$vgo.on('login:show', () => {
      // vr模式下不弹出登录框
      if(!this.isVrMode) {
        // IS_VIEW_MICRO_SCAN_LOGIN_OPEN是否开启微信扫码登录
        if ($globalconfig.MODULES.IS_VIEW_MICRO_SCAN_LOGIN_OPEN) {
          require('@/components/new-comps/scan-login/').default.open()
        } else {
          this.isShow = true
        }
        this.handleClearAutoSwitchScene()
      }
    })
  },
  methods: {
    handleSignUp() {
      if(this.phoneOk && this.nickNameOk && this.rePwdOk) {
        this.$vgo.tip('注册成功')
        this.handleClose()
      }
      else {
        this.$vgo.tip('填写资料不正确！', 'error')
      }
    },
    handleSignIn() {
      if(!this.username || !this.signInPwd) {
        this.$vgo.tip('用户名和密码不能为空')
        return
      }
      const {
        signature,
        noncestr,
        timestamp
      } =  sign('VgoUser')

      let options = {
        username: this.username,
        password: this.signInPwd,
        signature: signature,
        timestamp: timestamp,
        nonce: noncestr
      }
      this.$store.dispatch('userLogin', options)
      this.handleClose()
    },
    switchSignUp() {
      const url = `${$globalconfig.URLS.API}user/register`
      window.open(url, '_blank')
    },
    switchPassWord() {
      const url = `${$globalconfig.URLS.API}user/retrievepassword`
      window.open(url, '_blank')
    },
    handleClose() {
      this.isShow = false
      this.handleRestartAutoSwitchScene()
    },
    switchSignIn() {
      this.isSignup = false
    }
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/color.styl'
$black = #000
.login
  position: absolute
  width: 100%
  height: 100%
  left: 0
  top: 0
  overflow: hidden
  z-index: 101
  .mask
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    z-index: -1
    background-color: rgba($black, .3)
  .content
    position: absolute
    left: 50%
    top: 10%
    width: 600px
    padding: 12px 0px
    min-height: 400px
    max-height: 600px
    box-shadow: 10px 10px 16px 0px rgba($black, .88)
    // transition: all .3s ease
    transform: translateX(-50%)
    overflow: hidden
    .close
      position: absolute
      right: 12px
      top: 20px
      height: 24px
      width: 24px
      color: #fff
      text-align: center
      cursor: pointer
      z-index: 99
      &:hover
        color: $danger
      i
        font-size: 20px
    .excess, .form
      width: 100%
      padding: 1.5em 2em
      float: left
      box-sizing: border-box
    .excess
      overflow: hidden
      img
        width: 100%
    .form
      h2
        color: $white
        font-size: 25px
        text-align: left
        margin-bottom: 1em
        a
          font-size: 15px
          color: #ff9800
          margin-left: 10px
          font-weight: 500
      .field
        position: relative
        margin-bottom: 12px
        a
          font-size: 15px
          color: #fff
          &:hover
            color: $primary
        p
          color: $white
          font-size: 15px
          margin: 0px 0px 4px
          letter-spacing: 1px
          text-align: left
        i
          position: absolute
          left: 10px
          bottom: 5px
          font-size: 20px
          color: #fff
        input
          width: 100%
          font-size: 16px
          padding: 10px 10px 9px 45px
          line-height: 20px
          color: $black-dark
          background: rgba($white, .6)
          box-sizing: border-box
          border: none
          &::-webkit-input-placeholder
            color: $black-light
            font-size: 14px
        .login-btn
          display: block
          letter-spacing: 1.5px
          border-radius: 4px
          padding: 12px 39px
          margin-top: 2em
          font-size: 15px
          background: #00c6d7
          color: $white
          font-weight: bold
          text-align: center
          cursor: pointer
    .qr-from-wrap
      .from-content
        width: 260px
        height: 260px
        margin: 50px auto
        img
          max-width: 100%
          max-height: 100%
</style>
